<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>图书畅销榜</title>
    <%--引入vue的js--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入element的js--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <%--引入elementui的样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        h1{
            color: #3366ff; /* 设置标题颜色为蓝色 */
            text-align: center; /* 设置标题文本居中对齐 */
            font-family: "Arial", sans-serif; /* 设置标题字体为Arial */
            font-size: 24px; /* 设置标题字体大小为24像素 */
            font-weight: bold; /* 设置标题字体为粗体 */
            margin-bottom: 0; /* 移除标题的底部外边距 */
        }

        .book-ranking {
            width: 100%;
            margin: 20px;
        }
        .book-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
        .book-item:last-child {
            border-bottom: none;
        }
        .book-rank {
            width: 30px;
            font-weight: bold;
        }
        .book-info {
            margin-left: 10px;
        }
        .book-title {
            font-size: 16px;
        }
        .book-author {
            color: #888;
            font-size: 14px;
        }
    </style>
</head>
<body>
<el-header><h1>流行榜单</h1></el-header>
<div id="app">
    <el-table :data="bookRanking" class="book-ranking">
        <el-table-column prop="bookIco" label="图书图片" width="500px" class-name="book-rank">
            <template slot-scope="scope">
                <span><img style="width: 200px; height: 180px;" :src="scope.row.bookIco"></span>
            </template>
        </el-table-column>
        <el-table-column label="图书信息" width="380">
            <template slot-scope="scope">
                <div class="book-info">
                    <span class="book-title">{{ scope.row.bookName}}</span><br>
                    <span class="book-author">{{ scope.row.bookAuthor}}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="count" label="借阅图书次数" width="120"></el-table-column>
    </el-table>
</div>

</body>
<script>
    new Vue({
        el: '#app',
        data: {
            bookRanking: []
            //流行图书信息
        },
        created(){
            this.AllPopular();
        },
        methods:{
            //初始化流行图书信息
            AllPopular(){
                axios.get("/book/getAllPopulars").then(result=>{
                    this.bookRanking=result.data.data
                    console.log(result);
                })
            }
        }
    });
</script>
</html>
